Prompt the User before Doing a Long Operation with Echo Event
Jumper Chen, Engineer, Potix Corporation
December 27, 2007
Applicable to ZK 3.0.2 Freshly (zk-3.0.2-FL-2007-12-27 and later)
Introduction
Handling the long operation is always a challenge to Web application developers, since it will block the users from accessing until the long operation is done. As described in ZK Developer's Reference, there are several options to prevent the blocking: server push, suspend/resume, timer, and piggyback. They all require you to create a working thread to handle the long operation.
However, if it is OK for your application to block the user, ZK 3.0.2 introduces a neat way to provide a more descriptive message and to prevent the user from clicking a button and doing other activities. It is the echo event and the showBusy method.
The concept is simple: use the showBusy method of the org.zkoss.zk.ui.util.Clients class to show a descriptive message, and then use the echoEvent method to ask the client to fire back an event after it shows the message.
Of course, you can do whatever you want, not limited to the showBusy method. For example, you might want to open a window with the highlited mode.
Live Demo
Here is an example that when we click the button "Echo Event", the whole screen of browser will be hidden and the progress bar will show the "Execute..." message.
The demo zul file is shown below.
<window id="w" width="200px" title="Test echoEvent" border="normal">
<attribute name="onLater">
Thread.sleep(5000);
Clients.showBusy(null, false);
new Label("Done.").setParent(w);
</attribute>
<button label="Echo Event">
<attribute name="onClick">
Clients.showBusy("Execute... (about 5 sec.)", true);
Events.echoEvent("onLater", w, null);
</attribute>
</button>
</window>
As you can see, there are two key parts of this zul file. First, we use the Events.echoEvent method to invoke the onLater event of the window component, whose event thread will sleep about 5 sec. And the other one is that we could use Clients.showBusy method to show a message to tell the user that the system is busy.
Note: The Clients.showBusy method won't close the message automatically, thus you can follow the the example above, or use the timer component to invoke the Clients.showBusy method to close the message.
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |